<template>
  <div class="tw-flex tw-flex-col tw-justify-center tw-items-center tw-grow">
    <div class="tw-text-blue-500 tw-h-20 tw-w-20">
      <svg
        class="tw-animate-spin"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24">
        <circle
          class="tw-opacity-25"
          cx="12"
          cy="12"
          r="10"
          stroke="currentColor"
          stroke-width="4" />
        <path
          class="tw-opacity-75"
          fill="currentColor"
          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
      </svg>
    </div>
    <span class="tw-pt-4"> {{ $t('Loading') }}</span>

    <span class="tw-pt-2 tw-text-xl"> {{ $t('Please wait while your content is loaded') }}</span>
  </div>
</template>

<script setup>
</script>
